<template>
  <div class="handle-div">
    <div style="display: flex;justify-content: center;" @click="controlCamrea(1)">
      <img src="../../../../assets/image/video/up-active.png" alt="">
    </div>
    <div class="left_diva" @click="controlCamrea(3)">
      <img style="height:7rem" src="@/assets/image/video/left-active.png" alt="">
    </div>
    <div class="right_divs" @click="controlCamrea(4)">

      <img style="height:7rem" src="@/assets/image/video/right-active.png" alt="">
    </div>

    <div class="btn" @click="capture" style="display: flex;justify-content: center;">
      <img style="height:5rem" src="@/assets/image/video/yuyinn.png" alt="">
    </div>

    <div class="down" @click="controlCamrea(2)" style="display: flex;justify-content: center;">

      <img src="../../../../assets/image/video/down-active.png" alt="">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
const transcribe = () => {

}

const getPtzDataByGeo = () => {

}

const controlCamrea = (type) => {
  console.log(type)
}

const capture = () => {

}
</script>

<style scoped>
.handle-div {
  height: 100%;
  width: 100%;
  position: relative;
}

.left_diva {
  position: absolute;
  left: 3rem;
  height: 60%;
  top: 2rem;
}

.right_divs {
  position: absolute;
  right: 3rem;
  height: 60%;
  top: 2rem;
}
</style>